<template>
  <list-page-container :page-title="pageTitle">
    <!--指明要插入query插槽-->
    <template slot="query">
      <div class="query-content-container flex-column full-container">
        <div class="query-form-container flex-row">
          <div class="form-container">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true"
                     label-width="68px">
              <el-form-item label="" prop="orderName">
                <el-input
                  v-model="queryParams.orderName"
                  placeholder="请输入名称"
                  clearable
                  @keyup.enter.native="getListData"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="projectName">
                <el-button class="diy-bt" size="mini" @click="getListData">查 询</el-button>
              </el-form-item>
              <el-form-item label="" prop="projectName">
                <el-button class="diy-bt" size="mini" @click="resetQuery">重 置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="handle-container flex-row">
          <el-button class="diy-bt" size="mini" @click="addData">新 增</el-button>
          <el-button class="diy-bt" size="mini" @click="exportData">导 出</el-button>
        </div>
      </div>
    </template>
    <!--指明要插入body插槽-->
    <template slot="body">
      <el-table
        class="diy-table"
        :data="listData"
        style="width: 100%;" height="100%">
        <el-table-column
          prop="orderNo"
          label="保单编号">
        </el-table-column>
        <el-table-column
          prop="orderName"
          label="保单名称">
        </el-table-column>
        <el-table-column
          prop=""
          label="险种名称">
          <template slot-scope="scope">
            {{ (scope.row.insuranceType || {}).typeName }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sumArea"
          label="投保总面积(亩)">
          <template slot-scope="scope">
            <span class="important-txt">
            {{ scope.row.sumArea }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="totalMoney"
          label="投保总额(元)">
          <template slot-scope="scope">
            <span class="important-txt">
            {{ scope.row.totalMoney }}
            </span>
          </template>
        </el-table-column>

        <el-table-column width="150" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="goInfoPage(scope.row)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </template>
  </list-page-container>
</template>

<script>
import {listPageMixins} from "@/views/business/mixins/listPageMixins";
import {delInsurance, getInsuranceList} from "@/api/business/underwritingFile";

export default {
  mixins: [listPageMixins],
  data() {
    return {
      pageTitle: '档案列表',
      queryParams: {
        orderName: ''
      }
    }
  },
  methods: {
    getListData() {
      this.startLoading()
      let owner = this
      getInsuranceList(this.queryParams).then(res =>{
        owner.listData = res.rows
      }).finally(() => {
        this.endLoading()
      })
    },
    handleDelete(row) {
      this.$modal.confirm('是否确认删除?').then(function () {
        return delInsurance({id:row.id});
      }).then(() => {
        this.getListData();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
